<!--
***我的图文***
-->
<template>
  <div>
    <v-header v-if="!$root.ISAPP">
      <div class="nav-tab2">
        <h3>我的图文</h3>
      </div>
    </v-header>
    <div class="header">
      <span :class="{'header-active': switchIndex===0}" @click="switchType(0)">已分享图文({{shareNum}})</span>
      <span :class="{'header-active': switchIndex===1}" @click="switchType(1)">我的收藏({{collectionNum}})</span>
    </div>
    <v-list :load-handle='dataLoad' :more-handle='loadmore' :more-handling='css.isLoading' :isend='css.isEnd'>
      <div class="commodity-list" v-show="switchIndex===0">
        <distribution-commodity-unit v-for="item in shareList" :key='item.id' class="commodity-unit" :commodityInfo='item'></distribution-commodity-unit>
        <distribution-empty :showType="2" v-if="shareEmpty"></distribution-empty>
      </div>
      <div class="commodity-list" v-show="switchIndex===1">
        <distribution-commodity-unit v-for="item in collectionList" :key='item.id' class="commodity-unit" :commodityInfo='item'></distribution-commodity-unit>
        <distribution-empty :showType="3" v-if="collectionEmpty"></distribution-empty>
      </div>
    </v-list>
  </div>
</template>
<script>
import { getUrlParam } from '@/common/util'
import distributionCommodityUnit from './DistributionCommodityUnit'
import DistributionEmpty from './DistributionEmpty'
import { getMyGraphic,shareToBeDistributionUrl } from '../../common/api/distribution'
export default {
  components: {
    'distribution-commodity-unit': distributionCommodityUnit,
    DistributionEmpty
  },
  data() {
    return {
      switchIndex: 0,
      shareList: [],
      shareEmpty: false,
      shareNum: 0,
      collectionList: [],
      collectionEmpty: false,
      collectionNum: 0,
      distributionId: window.localStorage.getItem('distributionId'),
      css: {
        isLoading: false,
        isEnd: false,
        hasData: true
      },
      pagination: {
        sumcount: 0,
        pagesize: 10,
        pageindex: 1,
        hasLoad: true
      },
    }
  },
  created() {
    if (this.$root.ISAPP) {
      window.document.title = '我的图文'
      this.distributionId = this.getCurrentUser().distributionId
    }
    this.getShare()
    this.getCollection()
    shareToBeDistributionUrl({
      parentid: this.distributionId
    }).then(res=>{
      if (this.$root.ISAPP) {
        let opt = {
          name: 'getAppActivityShareContent',
          params: {
            sharetitle: res.shareinfo.title,
            sharecontent: res.shareinfo.content,
            sharepicurl: res.shareinfo.icon,
            shareurl: res.shareinfo.url,
            xcxurl: res.shareinfo.scene,
          }
        }
        this.javascriptBridge(opt)
      }else{
        this.initShare({
          info:{
            title:res.shareinfo.title,
            desc:res.shareinfo.content,
            img:res.shareinfo.icon,
            url:res.shareinfo.url
          }
        })
      }
    })
  },
  methods: {
    switchType(index) {
      this.switchIndex = index
      this.dataLoad()
    },
    getShare() {
      let opt = {
        distributionid: this.distributionId, 
        status: 0, 
        page: this.pagination.pageindex, 
        size: 20
      }
      getMyGraphic(opt)
        .then(res => {
          if (res && res.list.length > 0) {
            if(this.pagination.pageindex === 1){
              this.shareList = res.list
            }else{
              this.shareList = this.shareList.concat(res.list)
            }
            this.shareNum = res.total
          } else {
            if(this.pagination.pageindex === 1){
              this.shareEmpty = true
            }
            this.css.hasData = false
            this.css.isLoading = false
            if(this.pagination.pageindex !== 1){
              this.css.isEnd = true
            }
          }
        })
    },
    getCollection() {
      let opt = {
        distributionid: this.distributionId, 
        status: 1, 
        page: this.pagination.pageindex, 
        size: 20
      }
      getMyGraphic(opt)
        .then(res => {
          if (res && res.list.length > 0) {
            if(this.pagination.pageindex === 1){
              this.collectionList = res.list
            }else{
              this.collectionList = this.collectionList.concat(res.list)
            }
            this.collectionNum = res.total
          } else {
            if(this.pagination.pageindex === 1){
              this.collectionEmpty = true
            }
            this.css.hasData = false
            this.css.isLoading = false
            if(this.pagination.pageindex !== 1){
              this.css.isEnd = true
            }
          }
        })
    },

    loadmore(){
      if (this.css.isEnd === true) {
        this.toast('已无更多')
      } else {
        this.pagination.pageindex += 1
        if (this.pagination.pageindex > 1) {
          this.pagination.hasLoad = false
        }
        if(this.switchIndex){
          this.getCollection()
        }else{
          this.getShare()
        }
      }
    },
    dataLoad(){
      this.pagination.pageindex = 1
      this.css.isEnd = false
      if(this.switchIndex){
          this.collectionList = []
          this.getCollection()
        }else{
          this.shareList = []
          this.getShare()
        }
    },
  }
}
</script>
<style lang='scss' scoped>
.header {
  display: flex;
  width: 100%;
  height: 10.67vw;
}
.header span {
  width: 50%;
  height: 100%;
  text-align: center;
  color: #999;
  font-size: 16px;
  line-height: 10.67vw;
}
.header .header-active {
  color: #333;
  position: relative;
  &::after{
    width: 25vw;
    height: 2px;
    background: #333;
    content: '';
    position: absolute;
    bottom: 0;
    left: 12.5vw;
  }
}
.sorting {
  margin-top: 5.6vw;
  margin-left: 4vw;
}
.sorting .sorting-active {
  color: #fff;
  background-color: rgb(153, 153, 153);
}
.sorting span {
  background-color: rgb(204, 204, 204);
  color: rgb(153, 153, 153);
  font-size: 12px;
  padding: 1vw 4.8vw;
  border-radius: 4px;
  margin-right: 1vw;
}
.commodity-list{
  width: 94.67vw;
  margin: 4vw auto;
}
.commodity-unit{
  margin-top: 4vw;
}
</style>

